<template>
  <IFexHeaderMain>
    <template #header>
      <IHeader>表单</IHeader>
    </template>
    <view class="home_main wh_auto">
      <IForm :formData="formData" ref="formDataRef"></IForm>
      <button type="primary" @click="onsubmit">提交</button>
    </view>
    <template #footer><ITabBar /></template>
  </IFexHeaderMain>
</template>

<script setup lang="ts" name="index">
import { onMounted, ref } from 'vue';
import ITabBar from '@/components/container/ITabBar.vue';
import IFexHeaderMain from '@/components/container/IFexHeaderMain.vue';
import IHeader from '@/components/container/IHeader.vue';
import IForm from '@/components/form/IForm.vue';
import { FormInterFace } from '#/form/IForm';
const formDataRef = ref();
const formData = ref<FormInterFace<any>>({
  labelWidth: '50px',
  form: {
    name: '',
    sex: '',
    sex1: '',
    sex2: '',
    sex3: '',
    cascader: '',
    name1: '',
    name2: '',
    name3: '',
    name4: '',
    name5: '',
    name6: '',
    name7: '',
    name8: '',
    name9: '',
    name1222: ''
  },
  fieldDataList: [
    { type: 'input', label: '姓名', field: 'name', options: { suffixIcon: 'search', disabled: true }, callback: () => console.log('1111111111111111111111') },
    {
      type: 'input',
      label: '姓名',
      field: 'name1',
      options: { suffixIcon: 'search' },
      callback: () => console.log('1111111111111111111111'),
      rules: [{ required: true, errorMessage: '姓名不能为空' }]
    },
    {
      type: 'selectPopup',
      label: '姓名123',
      field: 'name1222',
      callback: () => console.log('1111111111111111111111'),
      rules: [{ required: true, errorMessage: '姓名不能为空' }],
      dataList: [
        { text: '男', value: 0 },
        { text: '女', value: 1 },
        { text: '未知', value: 3 },
        { text: '男', value: 4 },
        { text: '女', value: 5 },
        { text: '未知', value: 6 },
        { text: '男', value: 7 },
        { text: '女', value: 8 },
        { text: '未知', value: 9 },
        { text: '男', value: 11 },
        { text: '女', value: 12 },
        { text: '未知', value: 13 },
        { text: '男', value: 14 },
        { text: '女', value: 15 },
        { text: '未知', value: 16 }
      ]
    },
    {
      type: 'select',
      label: '性别',
      field: 'sex1',
      dataList: [
        { text: '男', value: 0 },
        { text: '女', value: 1 },
        { text: '未知', value: 2 }
      ],
      rules: [{ required: true, errorMessage: '性别不能为空' }],
      callback: e => console.log(e, '222222222222')
    },
    { type: 'input', label: '多行', field: 'name2', options: { type: 'textarea' }, callback: () => console.log('1111111111111111111111') },
    { type: 'time', label: '时分秒时间', field: 'name3', options: { type: 'textarea' }, callback: e => console.log(e, '1111111111111111111111') },
    { type: 'time', label: '单个时间', field: 'name4', options: { type: 'date' }, callback: e => console.log(e, '1111111111111111111111') },
    { type: 'time', label: '时间区间', field: 'name5', options: { type: 'daterange' }, callback: e => console.log(e, '1111111111111111111111') },
    { type: 'time', label: '时间区间时分秒', field: 'name6', options: { type: 'datetimerange' }, callback: e => console.log(e, '1111111111111111111111') },
    { type: 'calendar', label: '日历', field: 'name7', callback: e => console.log(e, '1111111111111111111111') },
    { type: 'inputNumber', label: '数字', field: 'name8', callback: e => console.log(e, '1111111111111111111111') },
    {
      type: 'cascader',
      label: '级联',
      field: 'cascader',
      dataList: [
        {
          text: '一年级',
          value: '1-0',
          children: [
            {
              text: '1.1班',
              value: '1-1'
            },
            {
              text: '1.2班',
              value: '1-2'
            }
          ]
        },
        {
          text: '二年级',
          value: '2-0',
          children: [
            {
              text: '2.1班',
              value: '2-1'
            },
            {
              text: '2.2班',
              value: '2-2'
            }
          ]
        },
        {
          text: '三年级',
          value: '3-0',
          disable: true
        }
      ],
      callback: e => console.log(e, '1111111111111111111111')
    },
    {
      type: 'candidates',
      label: '下拉筛选框',
      field: 'name9',
      dataList: [
        { text: '男', value: 0 },
        { text: '女', value: 1 },
        { text: '未知', value: 2 }
      ].map(item => item.text),
      callback: e => console.log(e, '1111111111111111111111')
    },
    {
      type: 'radio',
      label: '性别',
      field: 'sex',
      dataList: [
        { text: '男', value: 0 },
        { text: '女', value: 1 },
        { text: '未知', value: 2 }
      ],
      callback: e => console.log(e, '222222222222')
    },
    {
      type: 'checkbox',
      label: '性别',
      field: 'sex2',
      dataList: [
        { text: '男', value: 0 },
        { text: '女', value: 1 },
        { text: '未知', value: 2 }
      ],
      callback: () => console.log('222222222222')
    },
    {
      type: 'checkbox',
      label: '性别',
      field: 'sex3',
      dataList: [
        { text: '男', value: 0 },
        { text: '女', value: 1, disable: true },
        { text: '未知', value: 2 }
      ],
      options: {
        mode: 'tag'
      },
      callback: e => console.log(e, '222222222222')
    }
  ] // 对应表单属性
});
onMounted(() => {});
const onsubmit = () => {
  formDataRef.value.onSubmit().then((res: any) => {
    console.log(res);
  });
};
</script>

<style scoped></style>
